<template>
  <div class="accuse gap-col-8">
    <Selector
      v-model="reason"
      :items="reasons"
      item-title="content"
      item-value="id"
      :label="$t('info.title')"
      :placeholder="$t('placeholder.text')"
    ></Selector>
    <TextareaWrap
      v-model="content"
      :err-msg="contentErr"
      bg-dark
      :label="$t('info.detailedReason')"
      :placeholder="$t('placeholder.detailedReason')"
      :line="5"
    ></TextareaWrap>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { $t } from '@/i18n'
import Selector from '@/components/form/Selector.vue'
import TextareaWrap from '@/components/form/TextareaWrap.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { reportReasons } from '@/constant/home'

const reasons = computed(() =>
  reportReasons.map(({ id, reason }) => ({ id, reason, content: $t(`report.reason.${id}`) })),
)
const reason = ref(null)
const content = ref('')
const contentErr = ref('')

useConfirmData(validator)

function validator() {
  if (content.value === '') {
    contentErr.value = $t('yup.mixed.required')
    return false
  }

  const data = { reason: reasons.value.find(({ id }) => id === reason.value).content, content: content.value }

  // reset()

  return data
}

// function reset() {
//   reason.value = null
//   content.value = ''
//   contentErr.value = ''
// }
</script>
